<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
        #box{
            /*这里一旦用了padding，下面的内容就高度就不能自动扩充了*/
            width: 600px;height: auto;margin: 100px auto;
            border:1px solid #999999;padding: 30px 0px;
        }
        #box textarea{
            /*resize是防止用户拖动右下角，改变大小*/
            width: 450px;resize: none;
        }
        ul{
            list-style: none;
        }
        ul li{
            /*注意这里margin和left的区别*/
             width: 450px;margin-left: 80px; border-bottom:1px dashed #ccc;
            line-height: 30px;
        }
        #box li a {
            float: right;
        }
    </style>
</head>
<body>
    <div id="box">
        微博发布<textarea id="cont" cols="30" rows="10"></textarea><button id="btn">发布</button>
    </div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        var cont = document.getElementById("cont");
        var btn = document.getElementById("btn");

        //先创建，再追加
        var ul = document.createElement("ul");
        // box.appendChild("ul");不用加双引号
        box.appendChild(ul);
        //点击事件
        btn.onclick = function(){
            if(cont.value==""){
                alert("输入的内容不能为空！");
                return false;//终止函数运行(或者下面改成else)
            }
            var newli = document.createElement("li");
            newli.innerHTML = cont.value + "<a href='javascript:;'>删除</a>";

            cont.value="";//每次发完之后，清空输入框

            var chileNum = ul.childNodes;
            if(chileNum == 0){
                ul.appendChild(newli);
            }
            else{
                ul.insertBefore(newli,chileNum[0]);
            }

            var aArr = document.getElementsByTagName("a");
            // console.log(aArr)
            for (var i=0;i<aArr.length;i++){
                aArr[i].onclick = function () {
                    ul.removeChild(this.parentNode);
                }
            }



        }


    </script>

</body>
</html>